<template>
  <div class="personnelChange">
    <section class="header clearfix">
      <div class="back">
        <i class="iconfont iconfanhui1" @click="goBack()"></i>
        <span @click="goBack()">员工名录/薛文诚/人事变动</span>
      </div>
      <div class="add" @click="dateDialog = true">
        <i class="iconfont iconweimingmingwenjianjia_rili"></i>
        <span @click="add()">修改入职</span>
      </div>
    </section>
    <div class="type">
      <h2>人事变动类型</h2>
      <el-radio v-model="radio" label="1">常规变动</el-radio>
      <el-radio v-model="radio" label="2">离职</el-radio>
    </div>
    <div class="box" v-show="radio == '1'">
      <div class="input-box">
        <section>
          <span class="title">岗位</span>
          <span class="value">
            <el-input
              placeholder="在这里输入社保基数"
              v-model="station"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">主管</span>
          <span class="value">
            <el-input
              placeholder="在这里输入主管"
              v-model="administrator"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">合同公司</span>
          <span class="value">
            <el-input
              placeholder="在这里输入合同公司"
              v-model="contractCompany"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">部门</span>
          <span class="value">
            <el-input
              placeholder="在这里输入部门"
              v-model="department"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">办公地点</span>
          <span class="value">
            <el-input
              placeholder="在这里输入办公地点"
              v-model="wordAddress"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
    </div>
    <div class="box" v-show="radio == '1'">
      <div class="input-box cause">
        <section>
          <span class="title">调整原因</span>
          <span class="value">
            <el-input
              placeholder="在这里输入调整原因"
              v-model="wordAddress"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box effective">
        <section>
          <span class="title">
            生效日期
            <i>*</i>
          </span>
          <span class="value">
            <el-date-picker
              v-model="payMonth"
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </span>
        </section>
      </div>
    </div>
    <div class="box" v-show="radio == '2'">
      <div class="input-box">
        <section>
          <span class="title">
            离职原因
            <i>*</i>
          </span>
          <span class="value">
            <el-select v-model="dimission" placeholder="请选择">
              <el-option
                v-for="item in dimissionOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              ></el-option>
            </el-select>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">备注</span>
          <span class="value">
            <el-input
              placeholder="在这里输入备注"
              v-model="remark"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">
            离职日期
            <i>*</i>
          </span>
          <span class="value">
            <el-date-picker
              v-model="dimissionDate"
              type="date"
              placeholder="请选择"
            ></el-date-picker>
          </span>
        </section>
      </div>
      <div class="input-box">
        <section>
          <span class="title">员工邮箱</span>
          <span class="value">
            <el-input
              placeholder="在这里输入备注"
              v-model="email"
              clearable
            ></el-input>
          </span>
        </section>
      </div>
    </div>
    <div class="button-box">
      <div class="cancle" @click="goBack()">返回</div>
      <div class="comfirm" @click="submit()">保存</div>
    </div>
    <!--入职转正时间对话框-->
    <el-dialog
      title="修改入职"
      :visible.sync="dateDialog"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form :model="form">
        <el-form-item label="入职日期" :label-width="formLabelWidth">
          <el-date-picker
            v-model="entryTime"
            type="date"
            placeholder="选择日期"
          ></el-date-picker>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dateDialog = false">取 消</el-button>
        <el-button type="primary" @click="dateDialog = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import base from "@/assets/js/base";
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "personnelChange",
  data() {
    return {
      dateDialog: false,
      radio: "1",
      station: "",
      hire: "兼职",
      dimission: "",
      remark: "",
      dimissionDate: "",
      email: "",
      form: {
        departmentName: "",
        departmentManager: "",
        supDepartment: "",
        formLabelWidth: "120px",
      },
      accumulationType: "1",
      hireOptions: [
        { label: "全职", value: "1" },
        { label: "兼职", value: "0" },
      ],
      dimissionOptions: [
        {
          label: "合同期限届满，不再续订新的劳动合同",
          value: "合同期限届满，不再续订新的劳动合同",
        },
        {
          label: "乙方主动申请辞职",
          value: "乙方主动申请辞职",
        },
        {
          label: "试用期考核不通过的",
          value: "试用期考核不通过的",
        },
        {
          label: "乙方作中季度或年度度考核不及格的",
          value: "乙方作中季度或年度度考核不及格的",
        },
        {
          label: "乙方不能胜任作，经过培训或者调整工作岗位，仍不能胜任工作",
          value: "乙方不能胜任作，经过培训或者调整工作岗位，仍不能胜任工作",
        },
        {
          label:
            "乙方患病或者非因工负伤，医疗期满后，不能从事原工作也不能从事由甲方另行安排的工作",
          value:
            "乙方患病或者非因工负伤，医疗期满后，不能从事原工作也不能从事由甲方另行安排的工作",
        },
        {
          label:
            "乙方严重违反劳动纪律或者甲方规章制度。乙方过错对甲方利益造成重大损害",
          value:
            "乙方严重违反劳动纪律或者甲方规章制度。乙方过错对甲方利益造成重大损害",
        },
        {
          label:
            "客观情况发生重大变化，致使劳动合同无法履行，经甲乙双方协商同意终止合同",
          value:
            "客观情况发生重大变化，致使劳动合同无法履行，经甲乙双方协商同意终止合同",
        },
        {
          label: "其他",
          value: "其他",
        },
      ],
    };
  },
  methods: {
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  margin-right: 5px;
}
.add:hover {
  color: #13cb6e;
}
.back {
  cursor: pointer;
  display: inline-block;
}
.add {
  float: right;
  cursor: pointer;
}
.hr {
  clear: both;
}

.type {
  padding: 20px 35px;
  border-bottom: 1px solid #eee;
}
.type h2 {
  margin-bottom: 20px;
}
.el-input,
.el-select {
  width: 228px;
}
.el-form-item {
  width: 340px;
  margin: 0 auto 22px;
}
.input-box {
  width: 400px;
  margin: 20px 40px 0 20px;
}
.input-box .title {
  display: inline-block;
  margin-right: 20px;
  width: 70px;
  color: #666;
}
.input-box .title i,
.error {
  color: #f56c6c;
}
.input-box .value input {
  height: 34px;
  width: 228px;
  padding: 10px;
  border: 1px solid #d7d7d7;
  border-radius: 3px;
  outline: none;
}
.button-box {
  border-top: 1px solid #eee;
  text-align: center;
  padding: 30px;
  margin: 20px auto;
}
.button-box div {
  display: inline-block;
  width: 50px;
  padding: 8px 10px;
  border-radius: 3px;
  text-align: center;
  cursor: pointer;
}
.comfirm {
  margin-left: 10px;
  color: #fff;
  background-color: #13cb6e;
}
</style>
